import React from "react";

class FnClass extends React.PureComponent {
  constructor() {
    super();
  }
  state = {
    name: "张三",
    age: 18,
    info: {
      sex: "男",
      hobby: ["篮球", "足球"],
    },
  };

  ageAdd = () => {
    this.setState({
      age: this.state.age + 1,
    });
  };

  updateFnAdd = () => {
    //数据没有改变也会重新刷新-> 使用pureComponent可以阻止重复刷新
    // 1. 对于引用数据类型，只有属性或者属性中的属性发生改变才会刷新
    // 2. 对于普通数据类型，只要改变就会刷新
    this.setState({
      name: this.state.name,
    });
  };

  hobbyAdd(e) {
    this.setState(
      {
        info: {
          hobby: [...this.state.info.hobby, e],
        },
      },
      () => {
        console.log(this.state.info.hobby, "我是更新后的值");
      }
    );
  }

  render() {
    console.log("render");
    return (
      <div>
        <h1>Hello 响应数据</h1>
        <h1>
          我是{this.state.name}，我今年{this.state.age}岁，我是
          {this.state.info.sex}
          ，我喜欢{this.state.info.hobby}
        </h1>

        <button onClick={this.ageAdd}>增加年龄(修改普通数据)</button>
        <button onClick={this.hobbyAdd.bind(this, Math.random() * 10)}>
          增加爱好(修改对象数据)
        </button>

        <button onClick={this.updateFnAdd}>updateFnAdd</button>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <FnClass></FnClass>
    </div>
  );
}

export default App;
